import React from 'react';
import { Carousel, Icon } from 'antd';
import classnames from 'classnames';
import xss from 'xss';
import styles from './style.less';

const carouselSetting = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1
};
const SelectCard = ({ computedCompany, selected, handleSelect }) => {
    const ref = React.useRef();
    return (
        <div className={styles.container}>
            <Icon
                className={styles.leftButton}
                type="up-circle"
                style={{
                    fontSize: 24
                }}
                onClick={() => {
                    if (computedCompany.length > 3) ref.current.prev();
                }}
            />
            <Carousel {...carouselSetting} ref={ref}>
                {computedCompany.map(item => (
                    <div
                        className={classnames(styles.wrap, { [styles.selected]: selected === item.id })}
                        onClick={() => handleSelect(item.id)}
                    >
                        <div className={styles.box}>
                            <div className={styles.title}>{item.title}</div>
                            <div className={styles.desc} dangerouslySetInnerHTML={{ __html: xss(item.desc) }}></div>
                            <Icon
                                style={{ color: '#ffa808' }}
                                className={styles.check}
                                type="check-circle"
                                theme="filled"
                            />
                        </div>
                    </div>
                ))}
            </Carousel>
            <Icon
                className={styles.rightButton}
                type="up-circle"
                style={{
                    fontSize: 24
                }}
                onClick={() => {
                    if (computedCompany.length > 3) ref.current.prev();
                }}
            />
        </div>
    );
};

SelectCard.propTypes = {};

export default SelectCard;
